<template>
  <div class="attr-list">
    <CommonAttr />
    <px-form>
      <px-form-item v-for="item in compArr" :key="item" :label="compMap[item]">
        <px-select
          v-model="curComponent.propValue.actionMap[item]"
          value-key="id"
          filterable
          placeholder="Select"
          multiple
          collapse-tags
          collapse-tags-tooltip
        >
          <px-option
            v-for="(item, index) in filterData"
            :key="index"
            :label="dealName(getComponent(index, filterData))"
            :value="getComponent(index, filterData, 'id')"
          />
        </px-select>
      </px-form-item>
      <px-form-item label="是否开启HSE">
        <px-switch v-model="curComponent.propValue.hasHse" size="small" />
      </px-form-item>
    </px-form>
  </div>
</template>

<script setup lang="ts">
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
import { computed, inject, onMounted, ref, watch } from "vue";
import { cloneDeep } from "@pureadmin/utils";

const flattenTreeData = inject("curTreeData", ref({}));
let compArr = ["layerDepBase", "layerDepMech", "layerDepWater", "layerDepGas", "layerHse"];
let compMap = {
  layerDepBase: "实景",
  layerDepMech: "机械",
  layerDepWater: "水科",
  layerDepGas: "气化",
  layerHse: "HSE"
};
const componentStore = useComponent();
const { curComponent, componentData } = storeToRefs(componentStore);
let pointStr = "LayerDepFilter";

const filterData = computed(() => {
  let filterDatas = componentData.value.filter(item => pointStr.indexOf(item.component) === -1);
  let [group, comps] = partitionArrayByValue(cloneDeep(filterDatas), "component", "Group");

  group.forEach(item => {
    item.propValue.components.forEach(comp => {
      comp.groupName = item.label;
      comps.push(comp);
    });
  });
  return comps;
});
function getComponent(index, target?, key = "") {
  if (key) {
    return target[target.length - 1 - index][key];
  }
  return target[target.length - 1 - index];
}

function dealName(comp) {
  if (flattenTreeData.value && comp?.propValue?.routerKey) {
    const curTreeData = flattenTreeData.value[comp.propValue.routerKey];
    if (curTreeData) {
      const { type, code, className: name } = curTreeData;
      if (type === "EQP") {
        let name = replaceCharWithNewLine(comp.propValue.groupName) || code;
        return comp.groupName ? `${comp.groupName}/${name}` : name;
      }
    }
  }
  if (comp?.propValue?.type === "EQP") {
    let name = replaceCharWithNewLine(comp.propValue.groupName || comp.propValue.routerKey || comp.propValue.tip);
    return comp.groupName ? `${comp.groupName}/${name}/${comp.component}` : name;
  }
  if (comp.component === "VImage") return comp.groupName ? `${comp.groupName}/${comp.propValue.name}/${comp.component}` : comp.propValue.name;
  let name = replaceCharWithNewLine(comp.propValue.tip || comp.propValue.title);
  return comp.groupName ? `${comp.groupName}/${name}/${comp.component}` : comp.component;
}
function replaceCharWithNewLine(str, charToReplace = ",") {
  if (!str) return str;
  try {
    return str.replace(new RegExp(charToReplace, "g"), "\n");
  } catch (e) {
    return str;
  }
}
function partitionArrayByValue(array, key, value) {
  // 初始化两个空数组，用于存储结果
  const equals = [];
  const notEquals = [];

  // 遍历数组，根据条件分配到相应的数组中
  array.forEach(item => {
    if (item[key] === value) {
      equals.push(item);
    } else {
      notEquals.push(item);
    }
  });

  // 返回包含两个数组的对象
  return [equals, notEquals];
}
</script>
